{extend name="common/index"}
{block name="css"}
<style>
    #editForm label {
        padding: 0px 15px;
    }
</style>
{/block}
{block name="content"}
<div class="layui-row">
    <form id="searchForm" class="layui-form layui-form-pane tpl-form-search" onkeydown="if(event.keyCode=='13'){reloadTable('#searchForm');return false;}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <select name="type">
                        <option value="">请选择</option>
                        {volist name="typeList" id="vo"}
                        <option value="{$key}">{$vo}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">发送人</label>
                <div class="layui-input-inline">
                    <select name="create_by" lay-search="">
                        <option value="">请选择</option>
                        {volist name="userList" id="vo"}
                        <option value="{$vo.user_id}">{$vo.nick_name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否已读</label>
                <div class="layui-input-inline">
                    <select name="is_read">
                        <option value="">请选择</option>
                        <option value="0" selected>未读</option>
                        <option value="1">已读</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-normal" onclick="reloadTable('#searchForm');">搜索</a>
                    <a class="layui-btn" href="{:url('edit')}">新增</a>
                </div>
            </div>
        </div>
    </form>
</div>
<!--数据列表-->
<div class="layui-btn-group">
    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="ajaxDelete(getSelectedIdList(), '{:url("MessageList/delete")}');">
    <i class="layui-icon layui-icon-delete"></i>删除选中
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="setState(getSelectedIdList(), 1, 'is_read', '{:url("MessageList/updateSelectedState")}');">
    <i class="layui-icon layui-icon-play"></i>标记已读
    </button>
    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="setState(getSelectedIdList(), 0, 'is_read', '{:url("MessageList/updateSelectedState")}');">
    <i class="layui-icon layui-icon-pause"></i>标记未读
    </button>
</div>
<table id="msgTable" lay-filter="msgTable"></table>

<div id="msgModal" style="display: none;">
    <div class="layui-row" style="padding: 15px 10px;margin: 0 auto;">
        <div class="layui-col-md12">
            <form id="editForm" action="" class="layui-form" style="padding-right: 20px;">
                <input type="hidden" name="id" value="">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题：</label>
                    <div class="layui-input-block modal-title">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发送人：</label>
                    <div class="layui-input-block modal-user">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发送时间：</label>
                    <div class="layui-input-block modal-time">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详细内容：</label>
                    <div class="layui-input-block modal-content" style="word-break: break-all;">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    var table;
    var modal;
    layui.use(['form', 'table'], function () {
        var form = layui.form;
        table = layui.table;
        var user_id = {:session('userInfo.user_id')};

        //表格数据渲染：公告
        tableIns = table.render({
            elem: '#msgTable'
            , url: '{:url("getDataList")}'
            , page: true
            ,limit: table_limit
            ,limits: table_limits
            , cols: [[
                {type: 'checkbox', width: 50}
                , {field: 'type_text', title: '类型', width: 100}
                , {field: 'title', title: '标题', width: '20%'}
                , {field: 'content', title: '详细内容', width: '20%'}
                , {title:'是否已读', width: 90, align:'center', templet: function (data) {
                    var check_state = data.is_read == 1 ? 'checked' : '';
                    return '<input type="checkbox" name="is_read" value="'+data.is_read+'" data-id="'+data.list_id+'" lay-skin="switch"  lay-text="是|否" lay-filter="statusEvent" '+check_state+'>';
                }}
                , {field: 'create_by_name', title: '发送人', width: 90}
                , {field: 'create_time', title: '发送时间', minWidth: 150}
                ,{title:'操作', width: 100, templet: function (data) {
                    var _html = '<div class="layui-btn-group">';
                    _html += '<a class="layui-btn layui-btn-xs" lay-event="show">查看</a>';
                    if (user_id == 1) {
                        _html += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                    }
                    _html += '</div>';
                    return _html;
                }}
            ]]
            ,where: getFormJson('#searchForm')
        });

        //监听工具条
        table.on('tool(msgTable)', function(obj){
            var data = obj.data;//获得当前行数据
            var tr_dom = obj.tr; //获得当前行 tr 的DOM对象
            if (obj.event === 'del') {
                layer.confirm('接收者消息也将被删除，确定继续吗？', function(index){
                    $.post('{:url("delete")}',{id:data.msg_id}, function (result) {
                        layer.close(index);
                        if (result.code) {
                            layer.msg(result.msg);
                            reloadTable('#searchForm');
                        } else {
                            layer.alert(result.msg, {icon:2});
                        }
                    }, 'json');
                });
            } else if (obj.event === 'show') {
                $('.modal-title').text(data.title);
                $('.modal-user').text(data.create_by);
                $('.modal-time').text(data.create_time);
                $('.modal-content').text(data.content);
                modal = layer.open({
                    type: 5
                    , title: '信息详情'
                    , btn: ['已读']
                    , area: '500px'
                    , offset: '20%'
                    , content: $('#msgModal').html()
                    , yes: function (index, element) {
                        $.post('{:url("MessageList/updateField")}', {id:data.list_id, is_read:1}, function (result) {
                            if (result.code) {
                                layer.close(modal);
                                tr_dom.find('input[name="is_read"]').prop('checked', true);
                                form.render('checkbox');// 重新渲染开关
                            } else {
                                layer.alert(result.msg, {icon: 2});
                            }
                        }, 'json');
                    }
                });
            }
        });

        //监听状态操作
        form.on('switch(statusEvent)', function(obj){
            var data = {};
            var res = {};
            var index = layer.load(2, {shade:[0.5,'#000'],time: 10*1000});
            data['is_read'] = obj.elem.checked == true ? 1 : 0;
            data['id'] = $(obj.elem).data('id');

            $.ajax({
                url: '{:url("MessageList/updateField")}',
                type: 'POST',
                data: data,
                dataType: 'json',
                async: false,
                success: function (result) {
                    layer.close(index);
                    res = result;
                }
            });

            if (!res.code) {
                $(this).prop('checked', !obj.elem.checked);
                form.render('checkbox');// 重新渲染开关
                layer.alert(res.msg, {icon:2});
            }
        });
    });

    //获取当前选中的id，数组
    function getSelectedIdList() {
        var checkList = table.checkStatus('msgTable');
        var id_list = [];
        if (checkList.data.length>0) {
            $.each(checkList.data, function (key, val) {
                id_list[key] = val.list_id;
            });
        }
        return id_list;
    }
</script>
{/block}